<template>
  <div>
    <div class="search-box">
      <x-input
        v-model="searchValue"
        :show-clear="true"
        :placeholder="$t('notice.plsInput')"
        @on-change="searchMember"
      />
    </div>

    <!-- 联系人列表 -->
    <div ref="tabContacts" class="friend-box">
      <div
        v-for="(items, index) in showFriendsList"
        :key="index"
        class="friend-list"
      >
        <div :ref="items.key" :id="'Jump_' + items.key" class="letter">
          {{ items.key }}
        </div>
        <div v-for="(item, index) in items.list" :key="index" class="content">
          <img
            :src="item.portraitUrl"
            :onerror="errorDefaultImg"
            class="personal-img"
          >
          <p class="personal-name">{{ item.name }}</p>
          <div @click="addMember(item)">
            <x-icon
              v-show="isSelectContact(item)"
              type="ios-checkmark"
              class="select-btn"
              size="24"
            />
            <x-icon
              v-show="!isSelectContact(item)"
              type="ios-circle-outline"
              class="select-btn"
              size="24"
            />
          </div>
          <div class="clearfix" />
        </div>
      </div>
      <div class="letter-box">
        <p
          v-for="(item, index) in showFriendsList"
          :key="index"
          @click="jumpKey(item.key)"
        >
          {{ item.key }}
        </p>
      </div>
      <div v-if="!showFriendsList.length" class="no-data">
        <img src="@/assets/notice/empty.png" alt="" >
        <!-- <img src="@/assets/public/no-contacts.png" alt="" > -->
        <p>{{ $t('dood.noContacts') }}</p>
        <div class="button-box" @click="refresh">{{ $t('dood.refresh') }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XInput, Toast } from 'vux';
import { getFriends } from '@/api/dood';
export default {
  name: 'DoodFriend',
  components: {
    XInput,
    Toast,
  },
  data() {
    return {
      searchValue: '',
      showFriendsList: [], // 全部成员列表
      originSearchList: [], // 搜索时的源数据
      areaMemberList: [], // 存储发布范围人员
      errorDefaultImg: `this.src="${require('@/assets/notice/defaultError.png')}"`,
    };
  },
  created() {
    this.getFriendList();
  },
  methods: {
    // 获取联系人
    async getFriendList() {
      const result = await getFriends();
      if (result.status === 200) {
        const resList = result.data;
        const friendsList = [];
        const obj = {};
        const arr = [];
        const charAt = [
          'A',
          'B',
          'C',
          'D',
          'E',
          'F',
          'G',
          'H',
          'I',
          'J',
          'K',
          'L',
          'M',
          'N',
          'O',
          'P',
          'Q',
          'R',
          'S',
          'T',
          'U',
          'V',
          'W',
          'X',
          'Y',
          'Z',
        ];
        resList.forEach((item) => {
          item.portraitUrl = item.portraitUrl || '';
          if (item.firstPinYin === '' || item.firstPinYin === '~') {
            arr.push(item);
            obj['#'] = arr;
          }
        });
        for (let i = 0; i < charAt.length; i++) {
          obj[charAt[i]] = [];
          resList.forEach((item) => {
            if (item.firstPinYin === charAt[i]) {
              obj[charAt[i]].push(item);
            }
          });
        }

        // 把obj对象转一下格式放进页面渲染的数组中
        const entries = Object.entries(obj);
        for (const [key, value] of entries) {
          if (value.length) {
            friendsList.push({
              key: key,
              list: value,
            });
          }
        }
        this.showFriendsList = friendsList;
        this.originSearchList = friendsList;
      }
    },
    // 点击列表添加成员
    addMember(item) {
      for (let i = 0; i < this.areaMemberList.length; i++) {
        if (item.userId === this.areaMemberList[i].userId) {
          this.areaMemberList.splice(i, 1);
          return;
        }
      }
      this.areaMemberList.push(item);
      this.$emit('getSelectMembers', this.areaMemberList);
    },
    // 是否选中联系人
    isSelectContact(item) {
      for (let i = 0; i < this.areaMemberList.length; i++) {
        if (item.userId === this.areaMemberList[i].userId) {
          return true;
        }
      }
      return false;
    },
    // 搜索好友
    searchMember() {
      const list = [];
      if (this.searchValue) {
        this.showFriendsList.forEach((items, index) => {
          items.list.forEach((item) => {
            if (item.name.indexOf(this.searchValue) > -1) {
              list.push(item);
            }
          });
        });
        this.showFriendsList = [];
        if (list.length) {
          this.showFriendsList.push({
            key: list[0].firstPinYin,
            list: list,
          });
        }
      } else {
        this.showFriendsList = this.originSearchList;
      }
    },
    // 点击字母跳转到对应的模块
    jumpKey(txt) {
      this.$vux.toast.show({
        text: `<div style="font-size:3rem;">${txt}</div>`,
        width: '6rem',
        height: '6rem',
        type: 'text',
        time: 600,
        position: 'middle',
        onShow: () => {
          const jump = document.getElementById(`Jump_${txt}`).offsetTop - 180;
          this.$refs.tabContacts.scrollTop = jump;
        },
      });
    },
    // 当接口没有获取到数据可以点击刷新重新请求数据
    refresh() {
      this.getFriendList();
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../common/css/address-book.less';
.no-data {
  margin-top: 80px;
  width: 100%;
  img {
    display: block;
    width: 114px;
    margin: 0 auto;
  }
  p {
    text-align: center;
    margin-top: 10px;
    color: #999;
    font-size: 14px;
  }
  .button-box {
    width: 98px;
    height: 32px;
    border-radius: 4px;
    background: #3c7cfc;
    color: #fff;
    text-align: center;
    line-height: 32px;
    margin: 0 auto;
    margin-top: 14px;
    font-size: 15px;
  }
}
</style>
